<template>
  <div class="detail">
    <!-- 头部区域 -->
    <van-nav-bar left-arrow @click-left="$router.back()" :fixed="true" title="文章详情" class="i-title" z-index="99" />
    <!-- 标题 -->
    <h2>{{ detail.title }}</h2>
    <!-- 作者信息 -->
    <van-cell>
        <template #title>
            <div class="author">
              <div class="img">
              <img :src="detail.aut_photo" alt="">
            </div>
           <div class="msg">
              <div>{{detail.aut_name}}</div>
              <div>{{detail.pubdate | timefilter}}</div>
            </div>
          <div class="btn">
            <van-button type="info" @click="follow(detail.aut_id)" v-if="detail.is_followed === false">
              <van-icon name="plus" />关注
            </van-button>
            <van-button type="info" @click="unFollow(detail.aut_id)" v-else>
              已关注
            </van-button>
         </div>
        </div>
        </template>
    </van-cell>
    <!-- w文章内容 -->
    <van-cell>
        <template #title>
            <div v-html="detail.content"></div>
        </template>
    </van-cell>
    <!-- 点赞和不喜欢 -->
    <div class="mybtns">
        <!-- 点赞 -->
        <van-button @click="disZan" type="danger" round plain v-if="detail.attitude === 1">
            <van-icon name="like" />点赞
        </van-button>
        <van-button @click="zan" round plain v-else>
            <van-icon name="like" />点赞
        </van-button>
        <!-- 不喜欢 -->
        <van-button type="danger" @click="cancelLike" round plain v-if="detail.attitude === 0">
            <van-icon name="delete" />不喜欢
        </van-button>
        <van-button @click="disLike" round plain v-else>
            <van-icon name="delete" />不喜欢
        </van-button>
    </div>
    <!-- 评论区域 -->
    <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了" >
        <comment :isReply="false" :item="item" v-for="(item, index) in commentList" :key="index" />
    </van-list>
    <!-- 书写评论区域 -->
    <write @passComment='passComment' />
    <!-- 回复区域 -->
    <reply ref="reply" :isReply="isReply" />
  </div>
</template>

<script>
import comment from './com/comment.vue'
import write from './com/write.vue'
import reply from './com/reply.vue'
import { apiGetDetail, apiZan, apiGetDisZan, apiDisLike, apiCancelLike } from '@/api/article.js'
import { apiFollow, apiUnFollow } from '@/api/login.js'
import { apiComment } from '@/api/comment.js'
export default {
  components: {
    comment,
    write,
    reply
  },
  data () {
    return {
      loading: false,
      finished: false,
      artId: this.$route.params.artId,
      // 文章详情数据
      detail: {},
      // 偏移量
      offset: null,
      // 页容量
      limit: 10,
      // 评论的结果
      commentList: [],
      // 评论的总条数
      totalCount: 0,
      // 结束的标识
      endid: null,
      // 是否显示回复按钮
      isReply: false
    }
  },
  methods: {
    // 关注作者
    async follow (autid) {
      await apiFollow(autid)
      // 手动将用户的关注状态设置为true
      this.detail.is_followed = true
    },

    // 取消关注作者
    async unFollow (autid) {
      await apiUnFollow(autid)
      // 手动将用户的关注状态设置为false
      this.detail.is_followed = false
    },

    // 点赞
    async zan () {
      await apiZan(this.detail.art_id)
      // 手动将态度属性设置为1
      this.detail.attitude = 1
    },

    // 取消点赞
    async disZan () {
      await apiGetDisZan(this.detail.art_id)
      // 手动将态度属性设置为-1
      this.detail.attitude = -1
    },

    // 不喜欢
    async disLike () {
      await apiDisLike(this.detail.art_id)
      // 手动将态度属性设置为0
      this.detail.attitude = 0
    },

    // 取消不喜欢
    async cancelLike () {
      await apiCancelLike(this.detail.art_id)
      this.detail.attitude = -1
    },

    // 上拉加载
    async onLoad () {
      // 调用接口得到当前文章对应的评论数据
      const res = await apiComment({
        artid: this.artId,
        offset: this.offset,
        limit: this.limit
      })
      window.console.log('评论:', res)
      // 保存数据
      this.commentList = [...this.commentList, ...res.data.data.results]
      this.offset = res.data.data.last_id
      this.endid = res.data.data.end_id
      this.totalCount = res.data.data.total_count
      // 将 loading 设置为 false
      this.loading = false
      // 判断数据是否加载完毕
      if (this.offset === this.endid) {
        this.finished = true
      }
    },
    // 获得文章详情数据
    async getDetail () {
      const res = await apiGetDetail(this.artId)
      window.console.log('文章详情', res)
      this.detail = res.data.data
    },

    // 添加评论
    passComment (mycomm) {
      this.commentList.unshift(mycomm)
    }
  },
  created () {
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
.detail{
  margin-top: 46px;
  margin-bottom: 50px;
  .i-title {
        background-color: #3e9df8;
        /deep/ .van-nav-bar__title {
            color: #fff;
        }
        /deep/.van-icon {
            color: #fff;
        }
    }
    h1 {
        text-align: center;
        padding: 20px 0px;
    }
    .author {
        display: flex;
        .img {
            img {
                width: 50px;
                height: 50px;
                padding-right: 10px;
            }
        }
        .msg {
            flex: 1;
        }
    }
    .mybtns {
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
    }
}
</style>
